<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bundle js-ipfs with browserify</title>

    <link
      rel="stylesheet"
      href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"
      crossorigin
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css"
      crossorigin
    />
    <link rel="shortcut icon" href="favicon.ico" />

    <script defer src="bundle.js"></script>

    <style>
      ::placeholder {
        color: rgb(0 0 0 / 30%);
      }

      form {
        margin: 1.25rem 0;
      }

      .window {
        display: flex;
        flex-direction: column;
        background: #222;
        color: #fff;
        height: 400px;
      }

      .window .header {
        flex-basis: 3rem;
        background: #c6c6c6;
        position: relative;
      }

      .window .header:after {
        content: ". . .";
        position: absolute;
        left: 12px;
        right: 0;
        top: -3px;
        font-family: "Times New Roman", Times, serif;
        font-size: 96px;
        color: #fff;
        line-height: 0;
        letter-spacing: -12px;
      }

      .terminal {
        margin: 20px;
        font-family: monospace;
        font-size: 16px;
        overflow: auto;
        flex: 1;
      }
    </style>
  </head>
  <body class="montserrat f5">
    <header class="flex items-center pa3 bg-navy bb bw3 b--aqua">
      <a href="https://ipfs.io" title="home">
        <img
          alt="IPFS logo"
          src="ipfs-logo.svg"
          style="height: 50px"
          class="v-top"
        />
      </a>
    </header>

    <main class="pa4-l bg-snow mw7 mv5 center pa4">
      <h1 class="pa0 f2 ma0 mb4 aqua tc">Add data to IPFS from the browser</h1>

      <form id="add-file">
        <label for="file-name" class="f5 ma0 pb2 aqua fw4 db">Name</label>
        <input
          class="input-reset bn black-80 bg-white pa3 w-100 mb3"
          id="file-name"
          name="file-name"
          type="text"
          placeholder="file.txt"
          required
        />

        <label for="file-content" class="f5 ma0 pb2 aqua fw4 db">Content</label>
        <input
          class="input-reset bn black-80 bg-white pa3 w-100 mb3 ft"
          id="file-content"
          name="file-content"
          type="text"
          placeholder="Hello world"
          required
        />

        <button
          class="
            button-reset
            pv3
            tc
            bn
            bg-animate bg-black-80
            hover-bg-aqua
            white
            pointer
            w-100
          "
          id="add-submit"
          type="submit"
        >
          Add file
        </button>
      </form>

      <h3>Output</h3>

      <div class="window">
        <div class="header"></div>
        <div id="terminal" class="terminal"></div>
      </div>
    </main>
  </body>
</html>
